<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jsonco
 * @Date: 2022-12-18 19:48:04
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-08-28 07:36:57
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>笑脸</title>
    <script src="../lib/gl-utils.js"></script>
    <script src="../lib/gl-debug.js"></script>
    <script src="../lib/ice-utils.js"></script>
    <script src="../lib/gl-matrix.js"></script>
    <script src="../lib/gl-lint.js" crossorigin></script>
    <script type="text/javascript">
        // 顶点着色器
        var VSHADER_SOURCE = "";
        // 片元着色器
        var FSHADER_SOURCE = "";
        var gl = null;
        var canvas = null;

    
        var mousePosition = [0, 0];
        var startTime = 0;
        var mouseenter = false;
        var verticesTexCoords = new Float32Array([
            -1.0, 1.0, 0.0, 0., 1.,
            1.0, 1.0, 0.0, 1., 1.,
            -1.0, -1.0, 0.0, 0., 0.,
            1.0, -1.0, 0.0, 1., 0.
        ]);
        var index = [
            0, 2, 1,
            1, 2, 3
        ];
        async function main() {
            startTime = new Date().getTime();
            initWebgl();
            initShader();
            initEvent();

        }
        function render() {
            window.requestAnimationFrame(() => {
                draw()
                window.requestAnimationFrame(render)
            })
        }

        function initWebgl() {
            // 获取canvas对象
            canvas = document.getElementById('webgl');
            //获取webgl绘制对象
            gl = getWebGLContext(canvas);
            if (!gl) {
                console.log('不支持webgl哦！');
                return;
            }
        };
        async function initShader() {
       
            let FSHADER_SOURCE = await loadShaderFromFile("./shader/shade2.frag.glsl")
            
            let VSHADER_SOURCE = await loadShaderFromFile("./shader/shader2.vert.glsl")
            if (VSHADER_SOURCE && FSHADER_SOURCE) {
                initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
                initBuffer();
       
                render()
            }
        }

        function initBuffer() {

            let vertexTexCoordBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
            let FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
            let a_Position = gl.getAttribLocation(gl.program, 'a_Position');

            var indexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index), gl.STATIC_DRAW);

            gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 5, 0);
            gl.enableVertexAttribArray(a_Position);


            let u_Resolution = gl.getUniformLocation(gl.program, 'u_resolution');
            let resolution = glMatrix.vec2.create();
            resolution[0] = 512.0;
            resolution[1] = 512.0;
            gl.uniform2fv(u_Resolution, resolution);
   

        }
        function draw() {
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            let time = (new Date().getTime() - startTime) * 0.001;
            let u_Time = gl.getUniformLocation(gl.program, 'u_time');

            gl.uniform1f(u_Time, time);
            let u_Mouse = gl.getUniformLocation(gl.program, 'u_mouse');
            gl.uniform2fv(u_Mouse, [0.,0.]);
            if(mouseenter){
            gl.uniform2fv(u_Mouse, mousePosition);
            }
          
 

            gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
            gl.flush();
        }

        function mouseMove(e) {
            let mx = e.offsetX;
            let my = e.offsetY ;
            mousePosition = [mx, my];
            // console.log(mousePosition);

        }
        function mouseClick(e) {
            if(mouseenter==false){
                mouseenter = true;
            }else{
                mouseenter = false;   
            }
       

        }
        function initEvent() {
            canvas.addEventListener('mousemove', mouseMove, true);
            canvas.addEventListener('click', mouseClick, true);
        }


    </script>
</head>

<body onload="main()">
    <canvas id="webgl" width="512" height="512">
    </canvas>
</body>

</html>